<!DOCTYPE html>
<!--
Copyright 2011 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Author: Eric Bidelman (ericbidelman@chromium.org)
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Fullscreen API</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300|Raleway:100" rel="stylesheet" type="text/css">
<style>
::-webkit-scrollbar {
  width: 15px;
  background: white;
}
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 99px rgba(0,0,0,.2);
  border: solid transparent;
  border-width: 6px 4px;
}
html, body {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
body {
  margin: 2em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300; 
  -webkit-columns: 2;
  -webkit-column-gap: 2.5em;
  -webkit-column-rule: 1px solid #eee;
  /*text-align: justify;*/
}
h1, h2, h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  margin: 25px 0 10px 0;
  color: #888;
}
h1 {
  font-size: 60px;
  margin-top: 0;
}
h2 {
  font-size: 32px;
}

:-webkit-full-screen-document {
  
}
/* A full-screen element that is not the root element should be stretched to cover the viewport. */
:-webkit-full-screen:not(:root) {
  width: 90% !important;
  float: none !important;
}
:-webkit-full-screen video {
  width: 100%;
}
:-webkit-full-screen .tohide {
  display: none;
  opacity: 0.7;
}
/*@media all and (-webkit-full-screen:on) {
  :root:not(:full-screen) {
    overflow: hidden;
  }
}*/
#fs {
  float: right;
  width: 400px;
  background: -webkit-linear-gradient(white 20%, #eee);
  box-shadow: 0 0 10px #ccc inset;
  border-radius: 10px;
  text-align: center;
  padding: 1em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-left: 1em;
}
#fs div:first-of-type {
  margin-bottom: 10px;
  text-transform: uppercase;
}
video {
  width: 350px;
}
button {
  display: inline-block;
  background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));
  background: -webkit-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  background: -moz-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  background: -ms-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  background: -o-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  background: linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  border: 1px solid #999;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
button:hover {
  border-color: black;
}
button:active {
  background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#E3E3E3), to(#F9F9F9));
  background: -webkit-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
  background: -moz-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
  background: -ms-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
  background: -o-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
  background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
}
#overlay {
  position: fixed;
  z-index: 100;
  bottom: 0;
  height: 150px;
  width: 100%;
  background: -webkit-linear-gradient(bottom, white 5%, rgba(255, 255, 255, 0));
}
</style>
</head>
<body>

<div id="overlay"></div>

<h1>Main Title</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec hendrerit mauris.
Nulla pellentesque, tortor ac euismod elementum, erat risus pellentesque magna, feugiat
posuere dui diam quis risus. Duis gravida sagittis viverra. Mauris a pretium diam. Mauris
lacinia blandit pulvinar. Morbi a volutpat purus. In hac habitasse platea dictumst. Fusce
malesuada tortor nisl, ut suscipit urna. Morbi nec justo ligula, ornare convallis mi.</p>

<div id="fs">
  <div class="tohide">My awesome video</div>
  <video controls ondblclick="toggleFS(this)">
    <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source src="http://www.yo-yo.org/mp4/yu.mp4"></source>
  </video>
  <button id="enter-exit-fs" onclick="enterFullscreen()">Toggle fullscreen</button>
  <div><small>fullscreen: 'f', close: 'enter'</small></div>
</div>

<p>Donec volutpat est et augue consectetur ac auctor libero ultrices.
Ut tellus nisi, convallis at gravida id, interdum sit amet augue. Nullam et lacus ac elit
pellentesque ornare ac a urna. Sed vestibulum porta erat, vel vulputate nunc pellentesque a.
Ut neque dui, vulputate quis pretium vitae, ornare ac turpis. Vivamus quam tellus, fringilla
at rhoncus eget, placerat vitae nunc. Nam feugiat quam vel nisl dignissim bibendum. Cras dictum,
sem et cursus rutrum, turpis magna dictum orci, lacinia sagittis elit elit sit amet elit.
Cras feugiat erat sit amet elit sagittis ultrices. Nam rhoncus mollis massa, ut ultricies
lectus dignissim nec.</p>

<h2>Subtitle</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec hendrerit mauris.
Nulla pellentesque, tortor ac euismod elementum, erat risus pellentesque magna, feugiat
posuere dui diam quis risus. Duis gravida sagittis viverra. Mauris a pretium diam. Mauris
lacinia blandit pulvinar. Morbi a volutpat purus. In hac habitasse platea dictumst. Fusce
malesuada tortor nisl, ut suscipit urna. Morbi nec justo ligula, ornare convallis mi.</p>

<p>Donec volutpat est et augue consectetur ac auctor libero ultrices.
Ut tellus nisi, convallis at gravida id, interdum sit amet augue. Nullam et lacus ac elit
pellentesque ornare ac a urna. Sed vestibulum porta erat, vel vulputate nunc pellentesque a.
Ut neque dui, vulputate quis pretium vitae, ornare ac turpis. Vivamus quam tellus, fringilla
at rhoncus eget, placerat vitae nunc. Nam feugiat quam vel nisl dignissim bibendum. Cras dictum,
sem et cursus rutrum, turpis magna dictum orci, lacinia sagittis elit elit sit amet elit.
Cras feugiat erat sit amet elit sagittis ultrices. Nam rhoncus mollis massa, ut ultricies
lectus dignissim nec.</p>

<h2>Subtitle</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec hendrerit mauris.
Nulla pellentesque, tortor ac euismod elementum, erat risus pellentesque magna, feugiat
posuere dui diam quis risus. Duis gravida sagittis viverra. Mauris a pretium diam. Mauris
lacinia blandit pulvinar. Morbi a volutpat purus. In hac habitasse platea dictumst. Fusce
malesuada tortor nisl, ut suscipit urna. Morbi nec justo ligula, ornare convallis mi.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec hendrerit mauris.
Nulla pellentesque, tortor ac euismod elementum, erat risus pellentesque magna, feugiat
posuere dui diam quis risus. Duis gravida sagittis viverra. Mauris a pretium diam. Mauris
lacinia blandit pulvinar. Morbi a volutpat purus. In hac habitasse platea dictumst. Fusce
malesuada tortor nisl, ut suscipit urna. Morbi nec justo ligula, ornare convallis mi.</p>

<script>
var elem = document.querySelector('#fs');

document.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 13: // enter. ESC doesn't work for some reason. Need requestFullScreenWithKeys?
      e.preventDefault();
      document.webkitCancelFullScreen();
      break;
    case 70: // f
      enterFullscreen();
      break;
  }
}, false);

function toggleFS(el) {
  el.webkitEnterFullScreen();
  el.ondblclick = exitFullscreen;
}

function onFullScreenEnter() {
  console.log("Entered fullscreen!");
  elem.onwebkitfullscreenchange = onFullScreenExit;
};

// Called whenever the browser exits fullscreen.
function onFullScreenExit() {
  console.log("Exited fullscreen!");
};

function enterFullscreen() {
  console.log("enterFullscreen()");
  elem.onwebkitfullscreenchange = onFullScreenEnter;
  elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  document.getElementById('enter-exit-fs').onclick = exitFullscreen;
}

function exitFullscreen() {
  console.log("exitFullscreen()");
  document.webkitCancelFullScreen();
  document.getElementById('enter-exit-fs').onclick = enterFullscreen;
}
</script>
</body>
</html>